<template>
  <div style="display: flex;flex-direction: row;align-content: center;" :style="style">
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({


  setup() {
    const state = reactive({
      style: '',
      module: {
        config: {
          outer: {},
        },
        data: []
      }
    })

    const init = (module) => {
      state.module = module
      setOuterStyle()
    }

    // 设置外层容器样式
    const setOuterStyle = () => {
      let style = []
      let config: Record<string, string | number | any> = state.module.config.outer || {}
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.background) style.push('background:' + config.background)
      state.style = style.join(';')
    }

    return {
      ...toRefs(state),
      init
    }
  }
})
</script>